<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我们 - 企业官网</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
    <style>
        .nav-blur {
            backdrop-filter: blur(10px);
            background-color: rgba(255, 255, 255, 0.8);
        }
        .parallax-bg {
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: fixed;
        }
        .gradient-overlay {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.9), rgba(79, 70, 229, 0.9));
        }
        .floating {
            animation: floating 3s ease-in-out infinite;
        }
        @keyframes floating {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        .shine {
            position: relative;
            overflow: hidden;
        }
        .shine::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                to right,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.3) 50%,
                rgba(255, 255, 255, 0) 100%
            );
            transform: rotate(30deg);
            animation: shine 3s infinite;
        }
        @keyframes shine {
            0% { transform: translateX(-100%) rotate(30deg); }
            100% { transform: translateX(100%) rotate(30deg); }
        }
        .timeline-item {
            position: relative;
            padding-left: 3rem;
        }
        .timeline-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(to bottom, #6366f1, #4f46e5);
        }
        .timeline-item::after {
            content: '';
            position: absolute;
            left: -0.5rem;
            top: 0;
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            background: #6366f1;
        }
        .team-card {
            transition: all 0.3s ease;
        }
        .team-card:hover {
            transform: translateY(-10px);
        }
        .value-card {
            transition: all 0.3s ease;
        }
        .value-card:hover {
            transform: scale(1.05);
        }
        .rotate-in {
            animation: rotateIn 0.8s ease-out;
        }
        @keyframes rotateIn {
            from { transform: rotate(-180deg) scale(0); opacity: 0; }
            to { transform: rotate(0) scale(1); opacity: 1; }
        }
        .bounce-in {
            animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }
        @keyframes bounceIn {
            0% { transform: scale(0.3); opacity: 0; }
            50% { transform: scale(1.05); opacity: 0.8; }
            70% { transform: scale(0.9); opacity: 0.9; }
            100% { transform: scale(1); opacity: 1; }
        }
        .slide-in-left {
            animation: slideInLeft 0.8s ease-out;
        }
        @keyframes slideInLeft {
            from { transform: translateX(-100px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        .slide-in-right {
            animation: slideInRight 0.8s ease-out;
        }
        @keyframes slideInRight {
            from { transform: translateX(100px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        .pulse {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- 导航栏 -->
    <nav class="fixed w-full z-50 transition-all duration-300" id="navbar">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center h-16">
                <a href="home.html" class="text-2xl font-bold text-indigo-600">LOGO</a>
                <div class="hidden md:flex space-x-8">
                    <a href="home.html" class="text-gray-600 hover:text-indigo-600 transition-colors">首页</a>
                    <a href="products.html" class="text-gray-600 hover:text-indigo-600 transition-colors">产品服务</a>
                    <a href="solutions.html" class="text-gray-600 hover:text-indigo-600 transition-colors">解决方案</a>
                    <a href="about.html" class="text-indigo-600 font-medium">关于我们</a>
                    <a href="news.html" class="text-gray-600 hover:text-indigo-600 transition-colors">新闻动态</a>
                    <a href="contact.html" class="text-gray-600 hover:text-indigo-600 transition-colors">联系我们</a>
                </div>
                <div class="flex items-center space-x-4">
                    <a href="contact.html" class="hidden md:inline-block bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors">
                        立即咨询
                    </a>
                    <a href="about-mobile.html" class="md:hidden text-gray-600">
                        <i class="fas fa-bars text-xl"></i>
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main>
        <!-- 关于我们头部 -->
        <section class="relative h-[500px] overflow-hidden">
            <div class="absolute inset-0 parallax-bg" style="background-image: url('https://images.unsplash.com/photo-1497366216548-37526070297c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80');"></div>
            <div class="absolute inset-0 gradient-overlay"></div>
            <div class="relative container mx-auto px-4 h-full flex flex-col justify-center items-center text-center text-white">
                <h1 class="text-4xl md:text-5xl font-bold mb-6" data-aos="fade-up">关于我们</h1>
                <p class="text-xl text-indigo-100 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="200">
                    致力于为企业提供创新的数字化解决方案，助力企业转型升级
                </p>
                <div class="mt-8 flex space-x-4" data-aos="fade-up" data-aos-delay="400">
                    <a href="#company" class="bg-white text-indigo-600 px-6 py-3 rounded-lg hover:bg-indigo-50 transition-colors">
                        公司简介
                    </a>
                    <a href="#history" class="bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition-colors">
                        发展历程
                    </a>
                </div>
            </div>
        </section>

        <!-- 公司简介 -->
        <section id="company" class="py-20">
            <div class="container mx-auto px-4">
                <div class="flex flex-col md:flex-row items-center gap-12">
                    <div class="md:w-1/2" data-aos="fade-right">
                        <h2 class="text-3xl font-bold mb-6">公司简介</h2>
                        <p class="text-gray-600 mb-6 leading-relaxed">
                            我们是一家专注于数字化转型的科技公司，成立于2010年，致力于为企业提供创新的数字化解决方案。
                            通过持续的技术创新和服务优化，我们帮助客户实现业务增长和效率提升。
                        </p>
                        <p class="text-gray-600 mb-6 leading-relaxed">
                            我们的团队由行业专家和技术精英组成，拥有丰富的项目经验和深厚的技术积累。
                            我们始终坚持"以客户为中心"的服务理念，为客户提供专业、高效、可靠的解决方案。
                        </p>
                        <div class="grid grid-cols-2 gap-6 mt-8">
                            <div class="text-center">
                                <div class="text-3xl font-bold text-indigo-600 mb-2">10+</div>
                                <div class="text-gray-600">年行业经验</div>
                            </div>
                            <div class="text-center">
                                <div class="text-3xl font-bold text-indigo-600 mb-2">500+</div>
                                <div class="text-gray-600">成功案例</div>
                            </div>
                            <div class="text-center">
                                <div class="text-3xl font-bold text-indigo-600 mb-2">100+</div>
                                <div class="text-gray-600">企业客户</div>
                            </div>
                            <div class="text-center">
                                <div class="text-3xl font-bold text-indigo-600 mb-2">50+</div>
                                <div class="text-gray-600">技术专利</div>
                            </div>
                        </div>
                    </div>
                    <div class="md:w-1/2" data-aos="fade-left">
                        <div class="relative">
                            <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
                                 alt="公司团队" class="rounded-lg shadow-xl">
                            <div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-lg shadow-lg">
                                <div class="text-indigo-600 font-bold">我们的使命</div>
                <div class="text-gray-800">用科技创新推动企业数字化转型</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 发展历程 -->
        <section id="history" class="py-20 bg-gray-100">
            <div class="container mx-auto px-4">
                <h2 class="text-3xl font-bold text-center mb-16" data-aos="fade-up">发展历程</h2>
                <div class="max-w-4xl mx-auto">
                    <div class="timeline-item mb-12" data-aos="fade-up">
                        <div class="bg-white p-6 rounded-lg shadow-md">
                            <div class="text-indigo-600 font-bold mb-2">2010年</div>
                            <h3 class="text-xl font-semibold mb-2">公司成立</h3>
                            <p class="text-gray-600">在北京成立，开始专注于企业信息化服务</p>
                        </div>
                    </div>
                    <div class="timeline-item mb-12" data-aos="fade-up" data-aos-delay="100">
                        <div class="bg-white p-6 rounded-lg shadow-md">
                            <div class="text-indigo-600 font-bold mb-2">2013年</div>
                            <h3 class="text-xl font-semibold mb-2">业务扩展</h3>
                            <p class="text-gray-600">成功开发首个智能制造解决方案，服务客户突破50家</p>
                        </div>
                    </div>
                    <div class="timeline-item mb-12" data-aos="fade-up" data-aos-delay="200">
                        <div class="bg-white p-6 rounded-lg shadow-md">
                            <div class="text-indigo-600 font-bold mb-2">2015年</div>
                            <h3 class="text-xl font-semibold mb-2">技术突破</h3>
                            <p class="text-gray-600">获得多项技术专利，建立研发中心，团队规模突破100人</p>
                        </div>
                    </div>
                    <div class="timeline-item mb-12" data-aos="fade-up" data-aos-delay="300">
                        <div class="bg-white p-6 rounded-lg shadow-md">
                            <div class="text-indigo-600 font-bold mb-2">2018年</div>
                            <h3 class="text-xl font-semibold mb-2">全国布局</h3>
                            <p class="text-gray-600">在上海、广州、深圳设立分公司，服务范围覆盖全国</p>
                        </div>
                    </div>
                    <div class="timeline-item" data-aos="fade-up" data-aos-delay="400">
                        <div class="bg-white p-6 rounded-lg shadow-md">
                            <div class="text-indigo-600 font-bold mb-2">2023年</div>
                            <h3 class="text-xl font-semibold mb-2">持续创新</h3>
                            <p class="text-gray-600">推出新一代AI驱动的数字化解决方案，服务客户突破500家</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 企业文化 -->
        <section class="py-20">
            <div class="container mx-auto px-4">
                <h2 class="text-3xl font-bold text-center mb-16" data-aos="fade-up">企业文化</h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <div class="value-card bg-white p-8 rounded-xl shadow-md text-center" data-aos="fade-up">
                        <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-6">
                            <i class="fas fa-lightbulb text-2xl text-indigo-600"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-4">创新</h3>
                        <p class="text-gray-600">持续创新是我们的核心价值观，我们不断探索新技术，为客户创造更大价值</p>
                    </div>
                    <div class="value-card bg-white p-8 rounded-xl shadow-md text-center" data-aos="fade-up" data-aos-delay="100">
                        <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-6">
                            <i class="fas fa-users text-2xl text-indigo-600"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-4">协作</h3>
                        <p class="text-gray-600">我们相信团队协作的力量，通过内部协作和客户合作，共同实现目标</p>
                    </div>
                    <div class="value-card bg-white p-8 rounded-xl shadow-md text-center" data-aos="fade-up" data-aos-delay="200">
                        <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-6">
                            <i class="fas fa-chart-line text-2xl text-indigo-600"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-4">卓越</h3>
                        <p class="text-gray-600">追求卓越是我们的不懈追求，我们始终以最高标准要求自己，为客户提供最优质的服务</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 团队介绍 -->
        <section class="py-20 bg-gray-100">
            <div class="container mx-auto px-4">
                <h2 class="text-3xl font-bold text-center mb-16" data-aos="fade-up">核心团队</h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <div class="team-card bg-white rounded-xl shadow-md overflow-hidden" data-aos="fade-up">
                        <div class="relative h-64">
                            <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
                                 alt="CEO" class="w-full h-full object-cover">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                        </div>
                        <div class="p-6 text-center">
                            <h3 class="text-xl font-semibold mb-1">张明</h3>
                            <p class="text-indigo-600 mb-4">创始人 & CEO</p>
                            <p class="text-gray-600 mb-4">拥有20年IT行业经验，曾任多家知名企业技术总监</p>
                            <div class="flex justify-center space-x-4">
                                <a href="#" class="text-gray-400 hover:text-indigo-600">
                                    <i class="fab fa-linkedin"></i>
                                </a>
                                <a href="#" class="text-gray-400 hover:text-indigo-600">
                                    <i class="fab fa-twitter"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="team-card bg-white rounded-xl shadow-md overflow-hidden" data-aos="fade-up" data-aos-delay="100">
                        <div class="relative h-64">
                            <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
                                 alt="CTO" class="w-full h-full object-cover">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                        </div>
                        <div class="p-6 text-center">
                            <h3 class="text-xl font-semibold mb-1">李华</h3>
                            <p class="text-indigo-600 mb-4">首席技术官</p>
                            <p class="text-gray-600 mb-4">人工智能专家，拥有15年研发经验，主导多项核心技术研发</p>
                            <div class="flex justify-center space-x-4">
                                <a href="#" class="text-gray-400 hover:text-indigo-600">
                                    <i class="fab fa-linkedin"></i>
                                </a>
                                <a href="#" class="text-gray-400 hover:text-indigo-600">
                                    <i class="fab fa-github"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="team-card bg-white rounded-xl shadow-md overflow-hidden" data-aos="fade-up" data-aos-delay="200">
                        <div class="relative h-64">
                            <img src="https://images.unsplash.com/photo-1556157382-97eda2f9e2bf?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
                                 alt="COO" class="w-full h-full object-cover">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                        </div>
                        <div class="p-6 text-center">
                            <h3 class="text-xl font-semibold mb-1">王芳</h3>
                            <p class="text-indigo-600 mb-4">首席运营官</p>
                            <p class="text-gray-600 mb-4">拥有丰富的企业管理经验，负责公司日常运营和客户服务</p>
                            <div class="flex justify-center space-x-4">
                                <a href="#" class="text-gray-400 hover:text-indigo-600">
                                    <i class="fab fa-linkedin"></i>
                                </a>
                                <a href="#" class="text-gray-400 hover:text-indigo-600">
                                    <i class="fab fa-twitter"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 合作伙伴 -->
        <section class="py-20">
            <div class="container mx-auto px-4">
                <h2 class="text-3xl font-bold text-center mb-16" data-aos="fade-up">合作伙伴</h2>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
                    <div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-center" data-aos="fade-up">
                        <img src="https://via.placeholder.com/200x100?text=Logo+1" alt="合作伙伴1" class="max-h-12 opacity-60">
                    </div>
                    <div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-center" data-aos="fade-up" data-aos-delay="100">
                        <img src="https://via.placeholder.com/200x100?text=Logo+2" alt="合作伙伴2" class="max-h-12 opacity-60">
                    </div>
                    <div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-center" data-aos="fade-up" data-aos-delay="200">
                        <img src="https://via.placeholder.com/200x100?text=Logo+3" alt="合作伙伴3" class="max-h-12 opacity-60">
                    </div>
                    <div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-center" data-aos="fade-up" data-aos-delay="300">
                        <img src="https://via.placeholder.com/200x100?text=Logo+4" alt="合作伙伴4" class="max-h-12 opacity-60">
                    </div>
                    <div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-center" data-aos="fade-up" data-aos-delay="400">
                        <img src="https://via.placeholder.com/200x100?text=Logo+5" alt="合作伙伴5" class="max-h-12 opacity-60">
                    </div>
                    <div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-center" data-aos="fade-up" data-aos-delay="500">
                        <img src="https://via.placeholder.com/200x100?text=Logo+6" alt="合作伙伴6" class="max-h-12 opacity-60">
                    </div>
                    <div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-center" data-aos="fade-up" data-aos-delay="600">
                        <img src="https://via.placeholder.com/200x100?text=Logo+7" alt="合作伙伴7" class="max-h-12 opacity-60">
                    </div>
                    <div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-center" data-aos="fade-up" data-aos-delay="700">
                        <img src="https://via.placeholder.com/200x100?text=Logo+8" alt="合作伙伴8" class="max-h-12 opacity-60">
                    </div>
                </div>
            </div>
        </section>

        <!-- 联系我们 -->
        <section class="py-20 bg-gray-100">
            <div class="container mx-auto px-4 text-center">
                <h2 class="text-3xl font-bold mb-6" data-aos="fade-up">加入我们</h2>
                <p class="text-gray-600 max-w-2xl mx-auto mb-8" data-aos="fade-up" data-aos-delay="100">
                    我们始终欢迎优秀的人才加入我们的团队，一起创造未来
                </p>
                <a href="contact.html" class="inline-block bg-indigo-600 text-white px-8 py-3 rounded-lg hover:bg-indigo-700 transition-colors" data-aos="fade-up" data-aos-delay="200">
                    查看职位
                </a>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-900 text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-xl font-bold mb-4">关于我们</h3>
                    <p class="text-gray-400 mb-4">
                        致力于为企业提供创新的数字化解决方案，助力企业转型升级
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white">
                            <i class="fab fa-weixin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white">
                            <i class="fab fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white">
                            <i class="fab fa-linkedin text-xl"></i>
                        </a>
                    </div>
                </div>
                <div>
                    <h3 class="text-xl font-bold mb-4">快速链接</h3>
                    <ul class="space-y-2">
                        <li><a href="home.html" class="text-gray-400 hover:text-white">首页</a></li>
                        <li><a href="products.html" class="text-gray-400 hover:text-white">产品服务</a></li>
                        <li><a href="solutions.html" class="text-gray-400 hover:text-white">解决方案</a></li>
                        <li><a href="about.html" class="text-gray-400 hover:text-white">关于我们</a></li>
                        <li><a href="news.html" class="text-gray-400 hover:text-white">新闻动态</a></li>
                        <li><a href="contact.html" class="text-gray-400 hover:text-white">联系我们</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-xl font-bold mb-4">联系我们</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li class="flex items-center">
                            <i class="fas fa-map-marker-alt mr-2"></i>
                            北京市朝阳区科技园区88号
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-phone mr-2"></i>
                            400-123-4567
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-envelope mr-2"></i>
                            contact@company.com
                        </li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-xl font-bold mb-4">订阅我们</h3>
                    <p class="text-gray-400 mb-4">
                        订阅我们的 newsletter，获取最新资讯
                    </p>
                    <div class="flex">
                        <input type="email" placeholder="您的邮箱" class="px-4 py-2 rounded-l-lg w-full focus:outline-none text-gray-900">
                        <button class="bg-indigo-600 px-4 py-2 rounded-r-lg hover:bg-indigo-700">
                            订阅
                        </button>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
                <p>&copy; 2023 公司名称. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script>
        // 初始化AOS动画
        AOS.init({
            duration: 800,
            once: true
        });

        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('nav-blur');
                navbar.classList.add('shadow-md');
            } else {
                navbar.classList.remove('nav-blur');
                navbar.classList.remove('shadow-md');
            }
        });

        // GSAP动画
        gsap.registerPlugin(ScrollTrigger);

        // 数字增长动画
        gsap.from(".text-3xl.font-bold.text-indigo-600", {
            scrollTrigger: {
                trigger: "#company",
                start: "top center",
                toggleActions: "play none none reverse"
            },
            textContent: 0,
            duration: 2,
            ease: "power1.out",
            snap: { textContent: 1 },
            stagger: 0.2
        });

        // 时间线动画
        gsap.from(".timeline-item", {
            scrollTrigger: {
                trigger: "#history",
                start: "top center",
                toggleActions: "play none none reverse"
            },
            x: -100,
            opacity: 0,
            duration: 1,
            stagger: 0.2
        });

        // 团队卡片动画
        gsap.from(".team-card", {
            scrollTrigger: {
                trigger: ".team-card",
                start: "top center",
                toggleActions: "play none none reverse"
            },
            y: 100,
            opacity: 0,
            duration: 1,
            stagger: 0.2
        });
    </script>
</body>
</html> 